<template>
  <view>
    <view v-if="rechargeList.length==0">
      <u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png" text="暂无充值记录"/>
    </view>
    <view v-else class="recharge_box" v-for="(item,index) in rechargeList" :key="index">
      <view>
        <view style="display: flex;justify-content: space-between;">
          <text style="font-size: 32rpx;">充值金额：{{item.recharge_amount/100}} 元</text>
          <text style="color: #ff5500;font-size: 32rpx;">{{item.subject=='充值金豆'?'+'+item.bean+'金豆':item.subject}}</text>
        </view>

        <view style="display: flex;justify-content: space-between;margin-top: 20rpx;">
          <text style="color: #888;font-size: 28rpx;">说明：{{item.remark}}</text>
          <text
              style="color: #888;font-size: 24rpx;">{{(item.createtime*1000)|formatDateTime}}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {hideLoading, showLoading} from "../../utils/utils";
import common_mixin from '@/libs/mixin/common_mixin.js'

export default {
  mixins: [common_mixin],
  data() {
    return {
      page: 1, //记录当前的数据页数
      rechargeList: [],
    }
  },
  //页面载入时执行onload函数，async和await是固定搭配，作用是等待这一句执行完再执行下一句代码。
  async onLoad() {
    showLoading('加载中...');
    const list = await this.getList(this.page)
    this.rechargeList =list
    this.page++;
    hideLoading();
  },

  //触底时执行的函数
  async onReachBottom() {
    console.log("触底");
    const list = await this.getList(this.page)
    this.rechargeList =this.rechargeList.concat(list)
    this.page++;
  },
  methods: {
    async getList (page) {
      let resp = await this.$api.rechargeRecordList({page:page});
      return resp.data;
    },
  }
}
</script>

<style>
page {
  background-color: #f1f1f1;
}

.recharge_box {
  margin: 20rpx;
  background-color: #fff;
  padding: 20rpx;
  border-radius: 14rpx;
}
</style>
